<template>
  <DynamicForm
    ref="dynamicFormRef"
    v-model="formData"
    :form-config="formConfig"
    label-width="100px"
    :gutter="20"
  />
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import DynamicForm from "@/components/DynamicForm";
import type {
  FormItemConfig,
  DynamicFormInstance
} from "@/components/DynamicForm";
import { type MenuFormProps } from "./utils/types";

const props = withDefaults(defineProps<MenuFormProps>(), {
  formInline: () => ({
    id: null,
    parentId: 0,
    title: "",
    path: "",
    component: "",
    icon: "",
    permission: "",
    type: 1,
    status: 1,
    sort: 0,
    visible: true,
    keepAlive: false,
    remark: ""
  })
});

const dynamicFormRef = ref<DynamicFormInstance>();
const formData = ref(props.formInline);

// 动态表单配置
const formConfig = computed<FormItemConfig[]>(() => [
  {
    key: "title",
    name: "菜单名称",
    type: "input",
    required: true,
    placeholder: "请输入菜单名称",
    col: { xs: 24, sm: 12 }
  },
  {
    key: "type",
    name: "菜单类型",
    type: "radio",
    required: true,
    defaultValue: 1,
    options: [
      { label: "目录", value: 1 },
      { label: "菜单", value: 2 },
      { label: "按钮", value: 3 }
    ],
    col: { xs: 24, sm: 12 }
  },
  {
    key: "path",
    name: "路由地址",
    type: "input",
    placeholder: "请输入路由地址",
    col: { xs: 24, sm: 12 }
  },
  {
    key: "component",
    name: "组件路径",
    type: "input",
    placeholder: "请输入组件路径",
    show: data => data.type !== 3, // 按钮类型不显示组件路径
    col: { xs: 24, sm: 12 }
  },
  {
    key: "permission",
    name: "权限标识",
    type: "input",
    placeholder: "请输入权限标识",
    col: { xs: 24, sm: 12 }
  },
  {
    key: "icon",
    name: "菜单图标",
    type: "input",
    placeholder: "请输入菜单图标",
    col: { xs: 24, sm: 12 }
  },
  {
    key: "sort",
    name: "显示排序",
    type: "number",
    required: true,
    defaultValue: 0,
    params: {
      min: 0,
      max: 999,
      controlsPosition: "right"
    },
    col: { xs: 24, sm: 12 }
  },
  {
    key: "status",
    name: "菜单状态",
    type: "radio",
    defaultValue: 1,
    options: [
      { label: "启用", value: 1 },
      { label: "停用", value: 0 }
    ],
    col: { xs: 24, sm: 12 }
  },
  {
    key: "visible",
    name: "是否显示",
    type: "radio",
    defaultValue: true,
    options: [
      { label: "显示", value: true },
      { label: "隐藏", value: false }
    ],
    show: data => data.type !== 3, // 按钮类型不显示此选项
    col: { xs: 24, sm: 12 }
  },
  {
    key: "keepAlive",
    name: "是否缓存",
    type: "radio",
    defaultValue: false,
    options: [
      { label: "缓存", value: true },
      { label: "不缓存", value: false }
    ],
    show: data => data.type === 2, // 只有菜单类型显示此选项
    col: { xs: 24, sm: 12 }
  },
  {
    key: "remark",
    name: "备注",
    type: "textarea",
    placeholder: "请输入备注",
    params: {
      rows: 3
    },
    col: { xs: 24 }
  }
]);

function getRef() {
  return dynamicFormRef.value;
}

defineExpose({ getRef });
</script>
